<template>
  <a-radio-group v-if="tagType == 'radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
    <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
  </a-radio-group>

  <a-radio-group
    v-else-if="tagType == 'radioButton'"
    buttonStyle="solid"
    @change="handleInput"
    :value="getValueSting"
    :disabled="disabled"
  >
    <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>
  </a-radio-group>

  <a-select
    v-else-if="tagType == 'select'"
    :getPopupContainer="getPopupContainer"
    :placeholder="placeholder"
    :disabled="disabled"
    :value="getValueSting"
    :allowClear="true"
    @change="handleInput"
  >
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value" :disabled="item.disabled">
      <span style="display: inline-block; width: 100%" :title="item.text || item.label">
        {{ item.text || item.label }}
      </span>
    </a-select-option>
  </a-select>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'JetpieceDictSelectTag',
  props: {
    url: String,
    params: {},
    valueName: String,
    titleName: String,
    placeholder: String,
    disabled: Boolean,
    value: [String, Number],
    type: String,
    getPopupContainer: {
      type: Function,
      default: node => node.parentNode
    },
    itemDisabledField: {
      type: String,
      default: 'enableFlag'
    },
    hideDisabledItem: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dictOptions: [],
      tagType: ''
    }
  },
  watch: {
    params: {
      immediate: true,
      deep: true,
      handler(value, oldValue) {
        if (Object.keys(value).length > 0) {
          if (JSON.stringify(value) == JSON.stringify(oldValue)) return
          this.initDictData()
        } else {
          this.dictOptions = []
        }
      }
    }
  },
  created() {
    if (!this.type || this.type === 'list') {
      this.tagType = 'select'
    } else {
      this.tagType = this.type
    }
  },
  computed: {
    getValueSting() {
      return this.value != null ? this.value.toString() : undefined
    }
  },
  methods: {
    initDictData() {
      let that = this
      that.dictOptions = []
      if (this.url) {
        getAction(this.url, { pageSize: 500, ...this.params })
          .then(res => {
            that.dictOptions = []
            if (res.success) {
              let obj = []
              if (res.result instanceof Array) {
                obj = [...res.result]
              } else {
                obj = [...res.result.rows]
              }
              obj.forEach(item => {
                let disabled = item[this.itemDisabledField] == '0' || item[this.itemDisabledField] == 'N'
                if (!disabled || !this.hideDisabledItem) {
                  let option = {
                    label: item[this.titleName],
                    text: item[this.titleName],
                    title: item[this.titleName],
                    value: item[this.valueName],
                    disabled: disabled
                  }
                  that.dictOptions.push(option)
                }
              })
            }
          })
          .catch(() => {
            that.dictOptions = []
          })
      }
    },
    handleInput(e = '') {
      let val
      if (Object.keys(e).includes('target')) {
        val = e.target.value
      } else {
        val = e
      }
      this.$emit('change', val)
      this.$emit('input', val)
    },
    setCurrentDictOptions(dictOptions) {
      this.dictOptions = dictOptions
    },
    getCurrentDictOptions() {
      return this.dictOptions
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style scoped></style>
